<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./leaflet/leaflet.css"/>
    <script src="./leaflet/leaflet.js"></script>
    <script src="./sql-0.3.2.js"></script>
    <script src="./Leaflet.TileLayer.MBTiles.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LeafletMap</title>
    <style>
        /* 新增样式，用于调整按钮容器 */
        .button-container {
            margin-top: 20px;
            margin-left: 20px;
            display: grid;
            grid-template-columns: repeat(2, 1fr); /* 设置3列等宽布局 */
            gap: 20px; /* 设置button之间的间距 */
        }

        /* 模态对话框样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000; /* 确保对话框在地图上层 */
            left: 0;
            top: 0;
            width: 80%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            background-color: #fefefe;
            /* 缩小对话框大小 */
            width: 250px;
            padding: 15px;
            border: 1px solid #888;
            border-radius: 5px;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        /* 调整输入框和标签样式 */
        label {
            display: block;
            margin-bottom: 5px;
        }

        input {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            box-sizing: border-box;
        }

        button {
            padding: 8px 15px;
        }
    </style>
</head>

<body>

<div id="map" style="height: 600px; width: 500px"></div>
<div class="button-container">
    <!-- 添加生成随机点的按钮 -->
    <button id="generateRandomPoints">随机撒点</button>
    <!-- 添加清除标记的按钮 -->
    <button id="clearMarkers">清除撒点</button>
    <!-- 添加显示当前位置的按钮 -->
    <button id="getLocation">当前位置</button>
    <!-- 添加弹出可以输入当前地址的对话框的按钮 -->
    <button id="goToCoordinates">经纬度定位</button>
</div>
<!-- 模态对话框 -->
<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <label for="latitude">纬度 (-90 到 90):</label>
        <input type="text" id="latitude" />
        <br />
        <label for="longitude">经度 (-180 到 180):</label>
        <input type="text" id="longitude" />
        <br />
        <button id="confirmCoordinates">确认</button>
    </div>
</div>
<script>
    var map = L.map('map').setView({lng: 116.4, lat: 40 }, 11);
    // 无法直接使用原来的相对路径加载方式，arkWeb会把相对路径转换成Resouce://的资源路径格式，Leaflet.TileLayer.MBTiles.js库中用的fetch接口不支持处理这种格式的请求
    // 需要在native端读取地图数据后传给html
    // 通过http请求的方式发起离线地图数据请求，在native端拦截该请求，读取rawfile中离线地图数据再返回给html
    // 请求地址无需真实地址，native端拦截匹配的地址一致即可，域名建议使用应用包名
    let mb = L.tileLayer.mbTiles('http://com.example.hxdemo2/getMapData', {
        minZoom: 0,
        maxZoom: 12,
    }).addTo(this.map);

      // 用于存储已添加的标记
        var markers = [];

        // 比较两个经纬度是否足够接近
        function isSameLatLng(latlng1, latlng2) {
            const tolerance = 0.000001;
            return Math.abs(latlng1.lat - latlng2.lat) < tolerance && Math.abs(latlng1.lng - latlng2.lng) < tolerance;
        }

        // 监听地图点击事件
        map.on('click', function (e) {
            // 获取点击位置的经纬度
            var clickLatLng = e.latlng;
            var markerToRemove = null;

            // 查找是否有匹配的标记
            for (let i = 0; i < markers.length; i++) {
                if (isSameLatLng(markers[i].getLatLng(), clickLatLng)) {
                    markerToRemove = markers[i];
                    markers.splice(i, 1);
                    break;
                }
            }

            if (markerToRemove) {
                // 如果找到匹配的标记，移除它
                map.removeLayer(markerToRemove);
                console.log('Marker removed.');
            } else {
                // 如果没有找到匹配的标记，添加它
                var marker = L.marker(clickLatLng).addTo(map);
                // 可以为标记添加弹出窗口
                marker.bindPopup("You clicked here: " + clickLatLng.toString()).openPopup();
                markers.push(marker);
                console.log('Marker added.');
            }
        });

        // 清除标记按钮点击事件处理
        var clearButton = document.getElementById('clearMarkers');
        clearButton.addEventListener('click', function () {
            markers.forEach(function (marker) {
                map.removeLayer(marker);
            });
            markers = [];
        });

     // 获取当前位置按钮点击事件处理
        var getLocationButton = document.getElementById('getLocation');
        getLocationButton.addEventListener('click', function () {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    var lat = position.coords.latitude;
                    var lng = position.coords.longitude;

                    // 在地图上标记当前位置
                    var marker = L.marker([lat, lng]).addTo(map);
                    markers.push(marker);
                    marker.bindPopup('You are here!').openPopup();

                    // 设置地图视图到当前位置
                    map.setView([lat, lng], 16);
                }, function (error) {
                    console.error('Error getting location:', error.message);
                });
            } else {
                console.error('Geolocation is not supported by this browser.');
            }
        });

        // 生成随机点按钮点击事件处理
        var generateRandomPointsButton = document.getElementById('generateRandomPoints');
        generateRandomPointsButton.addEventListener('click', function () {
            var numPoints = 5; // 要生成的随机点数量
            for (var i = 0; i < numPoints; i++) {
                var randomLat = Math.random() * 1.6 + 39.4 ;  // 随机生成纬度 39 到 41
                var randomLng = Math.random() * 1.6 + 116 // 随机生成经度 115 到 117
                var randomLatLng = L.latLng(randomLat, randomLng);
                var marker = L.marker(randomLatLng).addTo(map);
                markers.push(marker);
            }
        });

         // 跳转到指定坐标按钮点击事件处理
        var goToCoordinatesButton = document.getElementById('goToCoordinates');
        var modal = document.getElementById('myModal');
        var closeBtn = document.getElementsByClassName('close')[0];
        var confirmBtn = document.getElementById('confirmCoordinates');

        goToCoordinatesButton.addEventListener('click', function () {
            modal.style.display = 'block';
        });

        closeBtn.addEventListener('click', function () {
            modal.style.display = 'none';
        });

        window.addEventListener('click', function (event) {
            if (event.target == modal) {
                modal.style.display = 'none';
            }
        });

        confirmBtn.addEventListener('click', function () {
            var lat = parseFloat(document.getElementById('latitude').value);
            var lng = parseFloat(document.getElementById('longitude').value);

            if (!isNaN(lat) &&!isNaN(lng) && lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180) {
                // 设置地图视图到指定坐标
                map.setView([lat, lng], 16);
                // 在地图上标记指定坐标位置
                var marker = L.marker([lat, lng]).addTo(map);
                markers.push(marker);
                marker.bindPopup(`You've moved to (${lat}, ${lng})`).openPopup();
                modal.style.display = 'none';
            } else {
                alert('输入的坐标无效，请输入有效的纬度 (-90 到 90) 和经度 (-180 到 180)。');
            }
        });


    mb.on('databaseloaded', (ev) => {
        console.info('MBTiles DB loaded', ev);
    });

    mb.on('databaseerror', (ev) => {
        console.info('MBTiles DB error', ev);
    });
</script>
</body>

</html>